<!--
 * @Author: wangzy
 * @Date: 2021-12-29 14:14:53
 * @LastEditors: wangzy
 * @LastEditTime: 2022-06-15 16:59:48
 * @Description: 
-->
<script lang="ts">
import { ref, toRefs, reactive, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore, mapState } from 'vuex'

export default {
  name: 'User',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const name = computed(() => store.state.name)
    const count = computed(() => store.state.count)

    let num1 = ref(1)
    let num2 = ref(2)
    let sum = computed(() => {
      return num1.value + num2.value
    })

    const changeCount = () => {
      store.commit('increment')
    }
    const msg = ref('你来了啊？')
    onMounted(() => {
      console.log('111')
      changeCount()
    })
    watch(num1, (newValue, oldValue) => {
      console.log(`当前数字增加了,${newValue},${oldValue}`)
    })
    return {
      name,
      count,
      msg,
      route,
      changeCount,
      num1,
      num2,
      sum,
    }
  },
}
</script>

<template>
  <div>
    {{ msg }} {{ route.query.name }} {{ name }}{{ count }}
    <button @click="changeCount">+</button>
    <div>
      <input type="number" v-model="num" />+
      <input type="number" v-model="nums" /> = {{ sum }}
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
